<template>
  <el-drawer v-model="drawer" direction="rtl" size="50%" :before-close="handleClose">
    <div class="card-box">
      <div class="manage_tit">
        <div class="line"></div>
        <p>卡券信息</p>
      </div>
      <div class="coupons_card mt-2.5">
        <el-row>
          <el-col :span="5" class="coupons_card_row_item">
            <div v-for="item in dict?.type?.limit_type" :key="item.value">
              <div v-if="item.value == String(userCardData.limitType)">
                <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                  <span class="spanStyle">领取方式：{{ item.label }}</span>
                </el-tooltip>
              </div>
            </div>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip class="item" effect="dark" :content="userCardData.code" placement="top">
              <span>卡券编码：{{ userCardData.code }}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip class="item" effect="dark" :content="userCardData.name" placement="top">
              <span>卡券名称：{{ userCardData.name }}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <div v-for="item in dict?.type?.coupon_type" :key="item.value">
              <div v-if="item.value == String(userCardData.discountType)">
                <el-tooltip class="item" effect="dark" :content="item.label" placement="top">
                  <span class="spanStyle">卡券类型：{{ item.label }}</span>
                </el-tooltip>
              </div>
            </div>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userCardData.userCoupon"
              placement="top"
            >
              <span>用户卡券编号：{{ userCardData.userCoupon }}</span>
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip
              class="item"
              effect="dark"
              :content="`${userCardData.surplusCount}次`"
              placement="top"
            >
              <span>可用次数：{{ userCardData.surplusCount }}次</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip
              class="item"
              effect="dark"
              :content="`${userCardData.cardUseNumDay}次`"
              placement="top"
            >
              <span>每日限次：{{ userCardData.cardUseNumDay }}次</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip class="item" effect="dark" placement="top">
              <template #content>
                <div v-if="userCardData.lifespanType === 1">永久有效</div>
                <div v-else-if="userCardData.lifespanType === 2">
                  {{ userCardData.lifespanStartTime }}
                  至
                  {{ userCardData.lifespanEndTime }}
                </div>
                <div v-else-if="userCardData.lifespanType === 3">
                  领券当日{{ userCardData.lifespanDay }}天有效
                </div>
                <div v-else-if="userCardData.lifespanType === 4">
                  领券次日{{ userCardData.lifespanDayNext }}天有效
                </div>
              </template>
              <span class="flex items-center"
                >有效期：
                <div class="flex-1 w-0 validity_date">
                  <div v-if="userCardData.lifespanType === 1 && userCardData.limitType == '1'">
                    领取当日{{ userCardData.lifespanDay }}天有效
                  </div>
                  <div v-if="userCardData.lifespanType === 1 && userCardData.limitType == '5'">
                    购买当日{{ userCardData.lifespanDay }}天有效
                  </div>
                  <div v-else-if="userCardData.lifespanType === 2">
                    {{ userCardData.lifespanStartTime }}
                    至
                    {{ userCardData.lifespanEndTime }}
                  </div>
                </div>
              </span>
            </el-tooltip>
          </el-col>
          <el-col :span="9" class="coupons_card_row_item">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userCardData.createTime"
              placement="top"
            >
              <span v-if="userCardData.limitType == '3'"
                >兑换时间：{{ userCardData.createTime }}</span
              >
              <span v-if="userCardData.limitType != '3'"
                >领取时间：{{ userCardData.createTime }}</span
              >
            </el-tooltip>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip class="item" effect="dark" :content="userCardData.nickName" placement="top">
              <span>用户名：{{ userCardData.nickName }}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip class="item" effect="dark" :content="userCardData.mobile" placement="top">
              <span>手机号：{{ userCardData.mobile }}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userCardData.offsetHours"
              placement="top"
            >
              <span v-if="userCardData.offsetHours == null || userCardData.offsetHours == 0"
                >可抵扣时长:0</span
              >
              <span v-else>可抵扣时长:{{ userCardData.offsetHours }}小时/次</span>
            </el-tooltip>
          </el-col>

          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip
              class="item"
              effect="dark"
              :content="userCardData.exchangeCode"
              placement="top"
            >
              <span v-if="userCardData.limitType == '3'"
                >兑换码:{{ userCardData.exchangeCode }}</span
              >
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip class="item" effect="dark" :content="userCardData.unit" placement="top">
              <span v-if="userCardData.limitType == '4'">发放单位:{{ userCardData.unit }}</span>
            </el-tooltip>
          </el-col>
          <el-col :span="5" class="coupons_card_row_item">
            <el-tooltip class="item" effect="dark" :content="userCardData.unit" placement="top">
              <span v-if="userCardData.limitType == '4'">购买金额:{{ userCardData.unit }}</span>
            </el-tooltip>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="card-box">
      <div class="manage_tit">
        <div class="line"></div>
        <p>使用记录</p>
      </div>
      <div class="mt-2.5">
        <el-table :data="list" v-loading="loading">
          <el-table-column label="使用时间" align="center" prop="useTime" show-overflow-tooltip />
          <el-table-column label="使用记录" align="center" prop="useCount" show-overflow-tooltip />
          <el-table-column
            label="使用场馆"
            align="center"
            prop="stadiumName"
            show-overflow-tooltip
          />
          <el-table-column
            label="剩余次数"
            align="center"
            prop="surplusCount"
            show-overflow-tooltip
          />
          <el-table-column
            label="剩余天数"
            align="center"
            prop="surplusDayCount"
            show-overflow-tooltip
          />
        </el-table>

        <pagination
          v-show="queryParams.total > 0"
          :total="queryParams.total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { cardHistoryPage, usePage } from '@/api/coupon/coupon'
import { useDict } from '@/utils/dict'
import Pagination from '@/components/Pagination/index.vue'

// 字典数据
const { dict } = useDict({
  dicts: ['coupon_type', 'limit_type'],
})

// 定义 emits
const emit = defineEmits(['refreshShow'])

// 定义响应式数据
const id = ref<number | null>(null)
const drawer = ref(false)

const userCardData = ref<any>({})
const loading = ref(false)
const list = ref<any[]>([])

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  couponsUserId: null as number | null,
})

// 初始化方法
const init = (val: number) => {
  id.value = val
  queryParams.couponsUserId = val
  drawer.value = true
  getCardHistoryPage()
  getList()
}

// 查询卡券信息
const getCardHistoryPage = () => {
  cardHistoryPage({ id: id.value }).then((res) => {
    if (res.rows.length > 0) {
      userCardData.value = res.rows[0]
    }
  })
}

// 关闭处理
const handleClose = () => {
  drawer.value = false
  emit('refreshShow')
}

// 获取使用记录列表
const getList = () => {
  loading.value = true
  usePage(queryParams).then((res) => {
    list.value = res.rows
    queryParams.total = res.total
    loading.value = false
  })
}

// 暴露方法给父组件
defineExpose({
  init,
})
</script>

<style scoped lang="scss">
:deep(.el-drawer) {
  .el-icon-close {
    color: #383838;
  }
  .el-row {
    .el-col {
      margin-top: 15px;
    }
    .el-col-5 {
      width: 20%;
    }
  }
}
.card-box {
  padding: 0 15px;
}
.coupons_card {
  padding: 0 15px 15px;
  background: rgba(243, 245, 247, 1);
  font-size: 14px;
  color: #383838;
  line-height: 21px;
  .coupons_card_row {
    margin: 0 0 10px 0;
  }

  .coupons_card_row_item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.validity_date div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
